<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/leader/notices'}">学院领导</el-breadcrumb-item>
      <el-breadcrumb-item>已审核记录查询</el-breadcrumb-item>
      <el-breadcrumb-item>已审核成绩查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!--表格区域-->
      <el-table :data="checkedSubjectList" stripe style="width:1125px;margin:0 15px">
        <el-table-column align="center" label="序号" width="80" type="index"></el-table-column>
        <el-table-column align="center" label="课题题目" width="200" prop="sub.name"></el-table-column>
        <el-table-column align="center" label="课题类型" width="110">
          <template slot-scope="scope"> 
            <el-tag type="info">{{scope.row.sub.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" width="110" >
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.sub.source.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报时间" width="120">
          <template slot-scope="scope"> 
            <span>{{$moment(scope.row.sub.declareTime).format('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报人" width="135">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.tea.name}} ({{scope.row.tea.id}})</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核时间" width="120">
          <template slot-scope="scope"> 
            <span>{{$moment(scope.row.sub.checkedTime).format('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="查看课题简介" width="125">
          <template slot-scope="scope">
            <el-popover placement="top" :title="scope.row.sub.name + '--课题简介'" width="250px" trigger="click" :content="scope.row.sub.introduce">
              <el-button slot="reference" circle icon="el-icon-view"></el-button>
            </el-popover> 
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="查看简介/审核意见/撤销" >
          <template slot-scope="scope">
            <el-popover placement="top" :title="scope.row.sub.name + '--课题简介'" width="250px" trigger="click" :content="scope.row.sub.introduce">
              <el-button slot="reference" circle icon="el-icon-view"></el-button>
            </el-popover> 
            <el-popover style="margin-left:10px" placement="bottom" :title="scope.row.sub.name + '--审核意见'" width="250px" trigger="click" :content="scope.row.sub.checkAdvice">
              <el-button slot="reference" type="success" circle icon="el-icon-check"></el-button>
            </el-popover> 
            <el-button style="margin-left:10px" type="danger" @click="cancelChecked(scope.row.sub.id)" circle icon="el-icon-delete"></el-button> 
          </template>
        </el-table-column>
      </el-table> 
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
  </div>
</template>

<script>
  import {getLeaderCheckedSubjectListByPage, getLeaderCheckedSubjectTotal,leaderCancelCheckedSubject} from '../../axios/subject' 
  export default {
    name: 'LeaderCheckedSubject',
    data(){
      return {
        pageParam:{  currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1, // 所有已审核的课题列表的总数  
        checkedSubjectList: [], // 已审核的课题列表 
      }
    },
    created(){
      this.getCheckedSubjectList()
      this.getCheckedSubjectTotal()
    },
    methods: {
      getCheckedSubjectTotal(){
        getLeaderCheckedSubjectTotal().then(res => {
          if(res.success){
            this.total = res.data
          }
        })
      },
      cancelChecked(subId){
        this.$confirm('确认撤销该条审核记录吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 向后端发送请求，删除信息
          leaderCancelCheckedSubject(subId).then(res => {
            if(res.success){
              this.$message.success('撤销成功!')
              this.pageParam.currentPage = 1
              this.getCheckedSubjectList()
              this.getCheckedSubjectTotal()
            }
          })
        }).catch(() => {
          this.$message.info('已取消提交!')
        }) 
      },
      // 获取已审核的课题列表 
      getCheckedSubjectList(){
        // 向后端发送请求，获取需要审核的课题列表
        getLeaderCheckedSubjectListByPage(this.pageParam).then(res => {
          if(res.success){
            this.checkedSubjectList = res.data 
          } 
        })

        // 无后端，模拟数据
        // this.checkedSubjectList = [
        //   {
        //     stu: {id: 6109118001, name: '张三'},
        //     tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},
        //     sub: { // 对应毕设课题
        //           id: 1,
        //           name: '前端模拟数据测试',
        //           introduce: '测试测试测试测试测试测试',
        //           declareTime: '2021-01-21',
        //           checkedTime: '2021-01-31',
        //           source: {id: 1, label: '学生自拟'},
        //           type: {id: 1, label: '理论研究'},
        //           status: 3,
        //           checkAdvice: '同意',
        //           stuId: 6109118001, 
        //           teaId: 610911, 
        //         } 
        //   }
        // ]
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getCheckedSubjectList()  
      },

    }
  }
</script>

<style> 
</style>